<template>
  <div class="statistics">
    <!-- <span>数据统计</span> -->
    <div class="top">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="昨日" name="1"></el-tab-pane>
        <el-tab-pane label="近7日" name="2"></el-tab-pane>
        <el-tab-pane label="近30日" name="3"></el-tab-pane>
        <el-tab-pane label="本周" name="4"></el-tab-pane>
        <el-tab-pane label="本月" name="5"></el-tab-pane>
      </el-tabs>
      <el-button icon="el-icon-download" type="primary" style="margin-right: 20px;" @click="handleExport()">
        数据导出
      </el-button>
    </div>
    <div class="main">
      <turnover :date="date"></turnover>
      <vip :date="date"></vip>
      <order :date="date"></order>
      <top10 :date="date"></top10>
    </div>

  </div>
</template>

<script>
import turnover from '@/components/statistics/turnover.vue'
import order from '@/components/statistics/order.vue'
import top10 from '@/components/statistics/top10.vue'
import vip from '@/components/statistics/vip.vue'
import {get1stAndToday,past30Day,past7Day,pastMonth,pastWeek} from '@/utils/formValidate'
import {exportInfor} from '@/api/report'
import axios from 'axios';
export default {
  components:{
    turnover,
    vip,
    order,
    top10
  },
  data() {
      return {
        activeName: '2',
        date:past7Day()
      };
  },
  methods: {
    handleClick(tab, event) {
      // console.log(this.activeName)
      // console.log(tab, event);
      switch(this.activeName){
        case'1':
          this.date = get1stAndToday()
          break;
        case'2':
          this.date = past7Day()
          break;
        case'3':
          this.date = past30Day()
          break;
        case'4':
          this.date = pastWeek()
          break;
        case'5':
          this.date = pastMonth()
          break;
        default:
          console.log('你点了啥？？？')
          break;
      }
      // console.log(this.date)
    },
        //  数据导出
  /** 导出按钮操作 */
  handleExport() {
    const that = this
    this.$confirm('是否确认导出最近30天运营数据?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })
      .then(async function () {
        const { data } = await axios.get('admin/report/export', { 
          headers:{
            token:that.$store.getters.token
          },
          responseType: 'blob' 
        })
        let url = window.URL.createObjectURL(data)
        var a = document.createElement('a')
        document.body.appendChild(a)
        a.href = url
        a.download = '运营数据统计报表.xlsx'
        a.click()
        window.URL.revokeObjectURL(url)
      })
      .then((response) => {})
  }

  }
}
</script>

<style scoped>
.top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 70px;
  margin-top: -10px;
  margin-left: 10px;
}

.main{
  display: flex;
  flex-wrap: wrap;
  background-color: #fff;
  padding: 15px;
  border-radius: 5px;
  justify-content: space-around;
}
</style>